<template>
  <skeleton v-if="loading" />

  <template v-else>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      :title="currentProject.title"
      @back="goBack"
    />
    <a-layout style="background: #fff; margin-top: 20px">
      <a-layout-content>
        <!-- 顶部图片 -->
        <a-card hoverable style="margin-bottom: 20px">
          <a-carousel autoplay arrows>
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
                <left-circle-outlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <right-circle-outlined />
              </div>
            </template>
            <div v-for="item in currentProject.images" :key="item">
              <img alt="Image" :src="item" style="width: 100%" />
            </div>
          </a-carousel>
        </a-card>

        <!-- 项目链接 -->
        <a-typography>
          <a-divider>
            <a-button
              :href="currentProject.url"
              type="link"
              target="_blank"
              block
              style="font-size: 24px; font-weight: bold"
            >
              访问项目
            </a-button>
          </a-divider>
        </a-typography>

        <!-- 项目介绍 -->
        <a-card hoverable style="margin-top: 20px">
          <a-card-meta title="项目介绍" :description="currentProject.description" />
          <a-descriptions bordered style="margin-top: 20px">
            <a-descriptions-item
              v-for="(item, index) in currentProject.descriptions"
              :key="index"
              :label="item.label"
              span="3"
            >
              {{ item.value }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-layout-content>
    </a-layout>
  </template>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'
import { getDashboardDetailApi } from '@/api/dashboard'
import Skeleton from '@/components/Skeleton.vue'

const route = useRoute()
const router = useRouter()

const currentProject = ref<any>({})
const loading = ref<boolean>(true)
const goBack = () => {
  router.back()
}
const getDashboardDetail = async (_id: string) => {
  let res: any = await getDashboardDetailApi({ params: { _id } })
  if (res.errCode === 0) {
    currentProject.value = res.data
    loading.value = false
  }
}

onMounted(() => {
  getDashboardDetail(route.params.id as string)
})
</script>

<style scoped lang="scss">
:deep(.slick-slide) {
  text-align: center;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 40px;
  height: 40px;
  font-size: 35px;
  color: #333;
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #009688;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
